<!DOCTYPE html>
<html>
<head>
    <link type="text/css" href="style.css" rel="stylesheet">
    <title></title>
    <script src="jquery-2.1.0.min.js"></script>

</head>
<body>
<input id="file" type="file" accept="application/json">
<hr/>
<div id="google-layout" class="layout-container" style="float: left">
    <div>
        <div class="google-search-box-container">
            <div class="google-txt-container">
                <div class="google-txt">facebook</div>
            </div>
            <div class="google-btn-container">
                <button class="google-btn"><span class="google-btn-icon"></span></button>
            </div>
        </div>
        <div class="google-result-count">
            Results <b>1</b> - <b>10</b> of about <b>780,373</b> for <b>facebook</b>. (0.12 seconds)
        </div>
        <div class="google-body">
            <div class="google-table">
                <a class="google-table-title" href="#"><b>Facebook</b> - Wikipedia, the free encyclopedia</a>
                <div class="google-cite">http://en.wikipedia.org/wiki/<b>Facebook</b></div>
                <div class="google-show-more">Show <span class="more">more</span> (13 rows / 4 columns total) - Import data</div>
                <table class="google-table-instant">
                    <tbody>
                        <tr><td>FB Penetration 31-Mar-2011</td><td>Users (in millions)</td><td>Days later</td><td>Monthly growth</td></tr>
                        <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                        <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                        <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                        <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                        <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                        <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="google-table">
                <a class="google-table-title" href="#"><b>Facebook</b> - Wikipedia, the free encyclopedia</a>
                <div class="google-cite">http://en.wikipedia.org/wiki/<b>Facebook</b></div>
                <div class="google-show-more"><a >Show <span class="more">more</span> (<span class="num-rows">13</span> rows / <span class="num-col">4</span> columns total)</a> - <a>Import data</a></div>
                <table class="google-table-instant">
                    <tbody>
                    <tr><td>FB Penetration 31-Mar-2011</td><td>Users (in millions)</td><td>Days later</td><td>Monthly growth</td></tr>
                    <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                    <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                    <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                    <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                    <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                    <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<div style="position: fixed; margin: 0 50%; background: #a0a0a0; width: 1px; height: 100%" ></div>

<div id="new-layout" class="layout-container" style="float: right" >
    <div>
        <div class="google-search-box-container">
            <div class="google-txt-container">
                <div class="google-txt">facebook</div>
            </div>
            <div class="google-btn-container">
                <button class="google-btn"><span class="google-btn-icon"></span></button>
            </div>
        </div>
        <div class="google-result-count">
            Results <span>1</span> - <span>10</span> of about <span>780,373</span> for facebook. (0.12 seconds)
        </div>
        <div class="google-body">
            <div class="google-table">
                <a class="google-table-title" href="#"><b>Facebook</b> - Wikipedia, the free encyclopedia</a>
                <div class="google-cite">http://en.wikipedia.org/wiki/<b>Facebook</b></div>
                <div class="new-tops">
                    <div class="new-top new-top-active" data-value="1">Show 1</div>
                    <div class="new-top" >Show 3</div>
                    <div class="new-top" >Show 10</div>
                    <div class="new-top">Full (<span>123</span> rows)</div>
                </div>
                <table class="google-table-instant">
                    <tbody>
                    <tr><td>FB Penetration 31-Mar-2011</td><td>Users (in millions)</td><td>Days later</td><td>Monthly growth</td></tr>
                    <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                    <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                    <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                    <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                    <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                    <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                    </tbody>
                </table>
            </div>
            <div class="google-table">
                <a class="google-table-title" href="#"><b>Facebook</b> - Wikipedia, the free encyclopedia</a>
                <div class="google-cite">http://en.wikipedia.org/wiki/<b>Facebook</b></div>
                <table class="google-table-instant">
                    <tbody>
                    <tr><td>FB Penetration 31-Mar-2011</td><td>Users (in millions)</td><td>Days later</td><td>Monthly growth</td></tr>
                    <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                    <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                    <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                    <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                    <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                    <tr><td>August 26, 2008</td><td>100</td><td>1,665</td><td>178.38%</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


<script src="utils.js"></script>
<script src="new-layout3.js"></script>
<script src="google-layout-3.js"></script>
<script src="minify.json.js"></script>
<script src="file_procession.js"></script>

<script>
    var googleLayout = new GoogleLayout().init();
    var newLayout = new NewLayout().init();
    var fileProc = new FileProcession(googleLayout, newLayout).init();
</script>
</body>
</html>